import React,{useEffect} from 'react'
import { Col, Row, Input, Select, DatePicker, Space,message } from 'antd';
import order from '../../../store/YeGuoPing/order'
import './index.scss'

export default function OrderTop() {
  let coid //ID
  let shopName//商品名称
  let ophoneNum//手机号
  let orderT//订单类型
  let orderStatus//订单状态
  let allusiness//加盟商
  let money//订单金额
  let toDay//日期
  console.log(coid);
 //调用接口拿到页面所有参数
      useEffect(()=>{
        order.trackOrder()
      },[])
  //重置
  const shuaXing=()=>{
    window.location.reload()
  }
  // 单选框
  const { Option } = Select;
   // 文本输入
  const text=(e)=>{
    if(!/^\d{1,20}$/.test(+e.target.value))
    {
    e.target.value=e.target.value.slice(0,20)
     message.error('请重新输入正确数字')
    }
      console.log(e.target.value)
    coid=e.target.value
     order.ById(coid)
  }
  //商品名称
  const commodity=(e)=>{
    if(!/^[a-zA-Z\u4E00-\u9FA5]{1,10}$/.test(+e.target.value)){
      e.target.value=e.target.value.slice(0,10)
      message.error('请重新输入正确名称')
    }
    shopName=e.target.value
  }
  //手机号
  const phonenumber=(e)=>{
    if(!/^\d{1,11}$/.test(+e.target.value)){
      e.target.value=e.target.value.slice(0,10)
      message.error('请重新输入正确手机号')
    }
    ophoneNum=e.target.value
  }
  // 订单类型
  const orderType = (value) => {
    orderT=value
  };
  // 订单状态
  const orderstatus = (value) => {
    orderStatus=value
  };
  // 加盟商
  const alliancebusiness = (value) => {
    allusiness=value
  };
  // 订单金额
const addMoney=(e)=>{
  money=e.target.value
}
  // 日期框
  const onChange = (value, dateString) => {
    toDay=dateString
  };
  //查询
  const inquire=(shopName,ophoneNum,orderT,orderStatus,allusiness,money,toDay)=>{
    order.mushNum(shopName,ophoneNum,orderT,orderStatus,allusiness,money,toDay)
  }
  return(
    <div>
      <div className='textTop'><span onClick={shuaXing}>重置刷新</span><button onClick={inquire}><p>查询</p></button></div>
      {/* 订单信息 */}
      <div className='Information'>
        <span id='oerdheard'>订单信息</span>
        <div className='InformText'>
          {/* 第一行 */}
          <Row>
            <Col span={8} className='smellInput'>
              <div className='smeltext'>
                <span>ID:</span><Input  style={{ height: '34px', width: '70%' }} onInput={text}/>
              </div>
            </Col>
            <Col span={8} className='smellInput'>
              <div className='smeltext'>
                <span>商品名称:</span><Input style={{ height: '34px', width: '70%' }} onInput={commodity}/>
              </div>
            </Col>
            <Col span={8} className='smellInput'>
              <div className='smeltext'>
                <span>手机号:</span><Input style={{ height: '34px', width: '70%' }} onInput={phonenumber}/>
              </div>
            </Col>
          </Row>
          {/* 第二行 */}
          <Row>
            <Col span={8} className='smellInput'>
              <div className='smeltext'>
                <span>订单类型:</span>
                <Select
                  defaultValue="全部"
                  style={{
                    width: '70%', height: '25px'
                  }}
                  onChange={orderType}
                >
                  <Option value="全部">全部</Option>
                  <Option value="课程">课程</Option>
                  <Option value="绘本">绘本</Option>
                  <Option value="积分">积分</Option>
                </Select>
              </div>
            </Col>
            <Col span={8} className='smellInput'>
              <div className='smeltext'>
                <span>订单状态:</span>
                <Select
                  defaultValue="全部"
                  style={{
                    width: '70%', height: '25px'
                  }}
                  onChange={orderstatus}
                >
                  <Option value="全部">全部</Option>
                  <Option value="正常">正常</Option>
                  <Option value="冻结">冻结</Option>
                </Select>
              </div>
            </Col>
            <Col span={8} className='smellInput'>
              <div className='smeltext'>
                <span>加盟商:</span>
                <Select
                  defaultValue="全部"
                  style={{
                    width: '70%', height: '25px'
                  }}
                  onChange={alliancebusiness}
                >
                  <Option value="全部">全部</Option>
                  <Option value="加盟商列表">加盟商列表</Option>
                </Select>
              </div>
            </Col>
          </Row>
          {/* 第三行 */}
          <Row>
            <Col span={8} className='smellInput'>
              <div className='smeltext'>
                <span>订单金额:</span><Input onChange={addMoney} style={{ height: '34px', width: '70%' }} />
              </div>
            </Col>
            <Col span={8} className='smellInput'>
              <div className='smeltext'>
                <span>下单时间:</span>
                <Space direction="vertical" size={12} style={{ height: '34px', width: '70%' }}>
                  <DatePicker showTime onChange={onChange} style={{width:'100%'}}/>
                </Space>
              </div>
            </Col>
          </Row>
        </div>
      </div>
    </div>
  )
}

